<!-- HomeAside.vue -->
<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { Plus, Expand, Upload } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { useChatStore } from '@/stores/chat'
import { useUserStore } from '@/stores/user'
import { ChatLineRound, User } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const chatStore = useChatStore()
const userStore = useUserStore()
const router = useRouter()

const isExpanded = ref(true)
const toggleSidebar = () => {
  isExpanded.value = !isExpanded.value
}

// 创建新会话
const createNewChat = async () => {
  if (!userStore.isAuthenticated) {
    ElMessage.warning('请先登录')
    return
  }
  await chatStore.startNewChat()
}

// 跳转到上传页面
const goToUpload = () => {
  router.push('/about')
}

// 加载指定会话
const loadConversation = async (conversationId: number) => {
  if (!userStore.isAuthenticated) {
    ElMessage.warning('请先登录')
    return
  }
  await chatStore.loadConversationMessages(conversationId)
}

// 监听登录状态变化，加载会话列表
onMounted(() => {
  const loadUserConversations = async () => {
    if (userStore.isAuthenticated && userStore.user) {
      await chatStore.loadConversations(userStore.user.id)
    }
  }

  // 初始加载
  loadUserConversations()
})

// 监听用户认证状态变化
watch(
  () => userStore.isAuthenticated,
  async (isAuthenticated) => {
    if (isAuthenticated && userStore.user) {
      await chatStore.loadConversations(userStore.user.id)
    }
  }
)

const sidebarWidth = computed(() => {
  return isExpanded.value ? '260px' : '60px'
})
</script>

<template>
<div class="aside">
  <div class="header" :style="{ width: sidebarWidth }">
    <div class="logo-section">
      <img src="../assets/img/aislogo.png" alt="大模型图标" class="logo">
      <span v-if="isExpanded" class="logo-text">Chainlit Llamaindex</span>
    </div>
    <el-icon @click="toggleSidebar" class="toggle-icon"><Expand /></el-icon>
  </div>

  <div class="new-chat-container" :style="{ width: sidebarWidth }">
    <el-button
      class="new-chat-btn"
      round
      @click="createNewChat"
      :icon="Plus"
    >
      <span v-if="isExpanded">新的聊天</span>
    </el-button>
    <el-button
      class="new-knowledg-btn"
      round
      @click="goToUpload"
      :icon="Upload"
    >
      <span v-if="isExpanded">知识库添加</span>
    </el-button>
  </div>

  <div class="chat-history" :style="{ width: sidebarWidth }">
    <!-- 展示历史会话列表 -->
    <div
      class="history-item"
      v-for="conv in chatStore.conversations"
      :key="conv.id"
      @click="loadConversation(conv.id)"
    >
      <div class="history-content" v-if="isExpanded">
        <el-icon class="history-icon"><ChatLineRound /></el-icon>
        <span class="history-text">{{ conv.title }}</span>
      </div>
      <el-icon class="history-icon-mini" v-else><ChatLineRound /></el-icon>
    </div>
  </div>

  <div class="sidebar-footer" :style="{ width: sidebarWidth }">
    <div class="user-info" v-if="isExpanded">
      <el-icon class="user-icon"><User /></el-icon>
      <span class="user-name">{{ userStore.user?.username || '未登录' }}</span>
    </div>
    <el-icon class="user-icon-mini" v-else><User /></el-icon>
  </div>
</div>
</template>

<style scoped>
/* 样式部分保持不变 */
.aside {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8f9fa;
  border-right: 1px solid #e5e7eb;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 16px;
  transition: width 0.3s ease;
  border-bottom: 1px solid #e5e7eb;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  width: 28px;
  height: 28px;
}

.logo-text {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.toggle-icon {
  cursor: pointer;
  font-size: 18px;
  color: #6b7280;
  transition: transform 0.3s ease;
}

.toggle-icon:hover {
  color: #1f2937;
  transform: scale(1.1);
}

.new-chat-container {
  padding: 16px;
  transition: width 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.new-chat-btn {
  width: 100%;
  height: 36px;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  color: #374151;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 12px;
  font-size: 14px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.new-knowledg-btn {
  width: 100%;
  height: 36px;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  color: #374151;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 12px;
  font-size: 14px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  margin-left:-1px;
}

.new-chat-btn:hover {
  background-color: #f9fafb;
  border-color: #9ca3af;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.new-knowledg-btn:hover {
  background-color: #f9fafb;
  border-color: #9ca3af;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.new-chat-btn span {
  margin-left: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.new-knowledg-btn span {
  margin-left: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-history {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px;
  transition: width 0.3s ease;
}

.history-item {
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 4px;
  transition: background-color 0.2s ease;
}

.history-item:hover {
  background-color: #e5e7eb;
}

.history-content {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.history-icon {
  font-size: 16px;
  color: #6b7280;
  flex-shrink: 0;
}

.history-icon-mini {
  font-size: 18px;
  color: #6b7280;
  display: flex;
  justify-content: center;
  width: 100%;
}

.history-text {
  font-size: 14px;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-footer {
  padding: 16px 12px;
  border-top: 1px solid #e5e7eb;
  transition: width 0.3s ease;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.user-icon {
  font-size: 18px;
  color: #6b7280;
}

.user-icon-mini {
  font-size: 20px;
  color: #6b7280;
  display: flex;
  justify-content: center;
  width: 100%;
}

.user-name {
  font-size: 14px;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 滚动条样式 */
.chat-history::-webkit-scrollbar {
  width: 6px;
}

.chat-history::-webkit-scrollbar-track {
  background: transparent;
}

.chat-history::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 3px;
}

.chat-history::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}
</style>
